<template>
  <div class="body">
    <h1>Table 表格</h1>
    <h2>
      <button @click="muTableRef.send()">刷新</button> <button @click="handleExport">handleExport</button>
    </h2>
    <MuTable ref="muTableRef" url="https://mock.presstime.cn/mock/64bf2b2bb9e270cc51cbf95d/example/page"
      :columns="columns">
      <template #name="{ data, prop }">
        <span>{{ data[prop] }}</span>
      </template>
    </MuTable>
    <h1>Http 请求</h1>
    <div>
      <MuHttp v-model="httpData" url="https://mock.presstime.cn/mock/64bf2b2bb9e270cc51cbf95d/example/page" method="get"
        :mountSend="false">
        <button>发送请求</button>
      </MuHttp>
    </div>
    <h1>Select 下拉选择</h1>
    <div>
      <MuSelect multiple filterable url="https://mock.presstime.cn/mock/64bf2b2bb9e270cc51cbf95d/example/list"
        method="get">
      </MuSelect>
      <h1></h1>
      <MuSelect multiple filterable v-model:data="columns[0].filters"
        :prop="{ label: 'text', value: 'value', disabled: 'disabled' }">
      </MuSelect>
    </div>
    <h1>Cascader 级联选择</h1>
    <div>
      <MuCascader multiple filterable collapseTags
        url="https://mock.presstime.cn/mock/64bf2b2bb9e270cc51cbf95d/example/cascader" method="get">
      </MuCascader>
    </div>
    <h1>Checkbox</h1>
    <div>{{ checkboxValues }}
      <MuCheckbox v-model="checkboxValues" url="https://mock.presstime.cn/mock/64bf2b2bb9e270cc51cbf95d/example/list"
        method="get" vertical enableCheckAll>
        <template #default="{ data }">
          <span>name:{{ data.name }}</span>
        </template>
      </MuCheckbox>
      <MuCheckbox v-model="checkboxValues" buttonful
        url="https://mock.presstime.cn/mock/64bf2b2bb9e270cc51cbf95d/example/list" method="get">
      </MuCheckbox>
    </div>
    <h1>Radio</h1>
    <div>
      <MuRadio v-model="checkboxValues" url="https://mock.presstime.cn/mock/64bf2b2bb9e270cc51cbf95d/example/list"
        method="get" vertical enableCheckAll>
        <template #default="{ data }">
          <span>name:{{ data.name }}</span>
        </template>
      </MuRadio>
      <MuRadio v-model="checkboxValues" buttonful
        url="https://mock.presstime.cn/mock/64bf2b2bb9e270cc51cbf95d/example/list" method="get">
      </MuRadio>
    </div>

    <div>count:{{ globalStore.count }}</div>
    <button @click="globalStore.increment">+1</button>
  </div>
</template>
<script setup>
import MuTable from '@/components/table';
import MuHttp from '@/components/http';
import MuSelect from '@/components/select';
import MuCascader from '@/components/cascader';
import MuCheckbox from '@/components/checkbox';
import MuRadio from '@/components/radio';
import { ref } from 'vue';
import { useGlobalStore } from '@/store/global.js';

const globalStore = useGlobalStore();

const muTableRef = ref(null);
const columns = ref([{
  label: 'ID',
  prop: 'id',
  filters: [
    { text: '1', value: 1 }, { text: '4', value: 4 }, { text: '7', value: 7 },
  ],
  filterMethod: (value, row) => {
    return (row.id + "").includes(value);
  },
}, {
  label: 'Name', prop: 'name', sortable: true, slotName: 'name'
}])

const httpData = ref(null);

function handleExport() {
  muTableRef.value.toXlsx('name');
}

const checkboxValues = ref([1, 2, 3, 4, 9]);
</script>
<style scoped>
.body {
  padding: 20px;
}
</style>